<!DOCTYPE html>
<html>
<head>
<#include "/common/common.ftl" parse=true encoding="utf-8">
<link href="${base}/styles/css/module/module-course.css" rel="stylesheet">
<link href="${base}/styles/css/module/module-job-search.css" rel="stylesheet">
<style>
.item_cont:hover {
	border-style: solid;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-color: #97CBFF;
	padding-right: 0px;
	padding-left: 0px;
}

.item_cont {
	background-color: #FFF;
	height: 160px;
	padding-right: 0px;
	padding-left: 0px;
}

.module {
	margin-top: 20px;
	padding-right: 0px;
	padding-left: 0px;
}

.type {
	margin-left: 40px;
}

.stage {
	margin-left: 40px;
}

.city {
	margin-left: 40px;
}

.company_state {
	padding-right: 0px;
	width: 200px;
}

.substance {
	margin-left: 10px;
}
</style>
</head>
<body>
	<#include "/common/header.ftl" parse=true encoding="utf-8">
	<div class="container">
		<div class="row">
			<!-- 搜索 -->
			<div class="col-md-12">
				<div class="search-wrapper">
					<div id="searchBar" class="search-bar">
						<div class="input-wrapper">
							<div class="keyword-wrapper">
								<span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span>
								<input type="text" id="keyword" name="keyword" autocomplete="off" maxlength="64" placeholder="搜索课程名称" class="ui-autocomplete-input">
							</div>
							<input type="button" id="submit" value="搜索" onclick="search();">
						</div>
					</div>
				</div>
			</div>

			<!-- 主要内容 -->
			<div class="col-md-12">

				<!-- 过滤器 -->
				<div class="col-md-12 leach">
					<ul class="filter-wrapper">
						<input type="hidden" id="categorySelected" name="categorySelected">
						<input type="hidden" id="gradeSelected" name="gradeSelected">
						<input type="hidden" id="sortOrderSelected"
							name="sortOrderSelected">

						<li><span class="title">课程分类：</span><span id="categoryList"></span>
						</li>
						<li><span class="title">课程等级：</span><span id="gradeList"></span>
						</li>
						<li><span class="title">排序方式：</span><span id="sortOrderList"></span>
						</li>
					</ul>
					<h1></h1>
				</div>

				<!-- 分页 -->
				<div class="col-md-12 page1">
					<span id="courseList"> </span>
				</div>
				<div id="pager" class="col-md-offset-6"><#include "/common/pager-manual-reload.ftl" parse=true encoding="utf-8"></div>
			</div>

		</div>
	</div>

	<#include "/common/footer.ftl" parse=true encoding="utf-8">
</body>
<script src="${base}/scripts/common/common-area.js"></script>

<script type="text/javascript">
	$(function() {
		resetSearchFilter();
	});

	function resetSearchFilter() {
		var url = "${base}/course/resetSearchFilterAction.json";
		var entity = {};

		var onloadFunc = function(result) {

			if (result.isSuccess == true) {
				var data = result.data;

				fillFilterList("category", data.categoryList,
						data.categorySelected);
				fillFilterList("grade", data.gradeList, data.gradeSelected);
				fillFilterList("sortOrder", data.sortOrderList,
						data.sortOrderSelected);

				$("#keyword").val(data.keyword);
				reloadAllData();
			} else {
				alert(result.message);
			}
		};
		httpRequestPostJson(url, entity, false, onloadFunc);
	}

	function fillFilterList(type, listString, selectedString) {
		var htmlString = "";
		var list = listString.split("-");
		for (var i = 0; i < list.length; i++) {
			if (list[i] === selectedString) {
				// 输出当前选中
				htmlString += '<a class="active" href="javascript:reloadData(\''+ type + '\',\'' + list[i] + '\');">' + list[i] + '</a>';
				htmlString += "&nbsp;&nbsp;&nbsp;&nbsp;";
			} else {
				// 输出其它
				htmlString += '<a href="javascript:reloadData(\'' + type + '\',\'' + list[i] + '\');">' + list[i] + '</a>';
				htmlString += "&nbsp;&nbsp;&nbsp;&nbsp;";
			}
		}
		$("#" + type + "List").html(htmlString);
		$("#" + type + "Selected").val(selectedString);
	}

	function reloadAllData() {
		var url = "${base}/course/reloadDataAction.json";
		var entity = {
			keyword : $("#keyword").val(),
			categorySelected : $("#categorySelected").val(),
			gradeSelected : $("#gradeSelected").val(),
			sortOrderSelected : $("#sortOrderSelected").val()
		};
		var onloadFunc = function(result) {
			if (result.isSuccess == true) {
				fillData(result.data);
				reloadPage(result.pager);
			} else {
				alert(result.message);
			}
		};
		httpRequestPostJson(url, entity, false, onloadFunc);
	}

	function search() {
		var url = "${base}/course/searchAction.json";
		var entity = {
			keyword : $("#keyword").val()
		};
		var onloadFunc = function(result) {
			if (result.isSuccess == true) {
				reloadAllData();
			} else {
				alert(result.message);
			}
		};
		httpRequestPostJson(url, entity, false, onloadFunc);
	}

	function fillData(list) {
		var htmlString = "";
		for (var i = 0; i < list.length; i++) {
			var item = list[i];
			htmlString += getItemString(item.id, item.picUrl, item.name,
					item.categoryName, item.level, item.speakerName,
					item.viewCount, item.commentCount, item.createTime);
		}
		if (htmlString === null || htmlString.length == 0) {
			htmlString = '<div class="col-md-12 text-center"><hr/>暂无记录<hr/></div>';
			$("#pager").hide();
		} else {
			$("#pager").show();
		}
		$("#courseList").html(htmlString);
	}

	function getItemString(id, picUrl, name, categoryName, level, speakerName,
			viewCount, commentCount, createTime) {
		if (picUrl === undefined || picUrl === null || picUrl === "") {
			picUrl = "${base}/styles/images/common/logo.png";
		} else{
			picUrl = "${base}/io/uploadPreviewAction.do?filename=" + picUrl;
		}
		var htmlString = '';
		htmlString += '<div class="col-md-6 model">';
		htmlString += '<ul class="item_con_list">';
		htmlString += '<dl class="item_cont col-md-12">';
		htmlString += '<div class="col-md-4">';
		htmlString += '<dt class="fl">';
		htmlString += '<a href="${base}/course/' + id + '/detail.html" target="_blank"><img class="lazy_img" src="' + picUrl + '" alt="课程图片" class="img-rounded"></a>';
		htmlString += '</dt>';
		htmlString += '</div>';
		htmlString += '<div class="col-md-8 module">';
		htmlString += '<dd class=" substance">';
		htmlString += '<h3>';
		htmlString += '<a class="item_title" href="${base}/course/' + id + '/detail.html" target="_blank">' + name + '</a>';
		htmlString += '</h3>';
		htmlString += '<div class="h4">';
		htmlString += '<p>';
		htmlString += '<span>课程类别：' + categoryName + '</span>&nbsp;&nbsp;&nbsp;';
		htmlString += '<span>课程等级: ' + level + '</span>';
		htmlString += '</p>';
		htmlString += '<p>';
		htmlString += '<span>评论次数:' + commentCount + '</span>&nbsp;&nbsp;&nbsp;';
		htmlString += '<span>查看次数:' +  viewCount + '</span>';
		htmlString += '</p>';
		htmlString += '<p>';
		htmlString += '<span>主讲人:' + speakerName + '</span>&nbsp;&nbsp;&nbsp;';
		htmlString += '</p>';
		htmlString += '<p>';
		htmlString += '<span>发布时间:' + createTime + '</span>&nbsp;&nbsp;&nbsp;';
		htmlString += '</p>';
		htmlString += '</div>';
		htmlString += '</dd></div>';
		htmlString += '</dl>';
		htmlString += '</ul>';
		htmlString += '</div>';
		return htmlString;
	}

	function reloadData(type, value) {
		var list = $("#" + type + "List a");
		for (var i = 0; i < list.length; i++) {
			if (list[i].innerHTML === value) {
				list[i].className = 'active';
			} else {
				list[i].className = '';
			}
		}
		$("#" + type + "Selected").val(value);

		reloadAllData();
	}
</script>

</html>